<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFC的作用</title>
    <style>
        .box {
            width: 500px;
            height: 200px;
            background-color: rosybrown;
        }

        .child {
            width: 80px;
            height: 50px;
            background-color: seagreen;
        }

        span{
            /* margin + padding  上下 设置不起作用 左右可以 */
            /* margin:0 0 0 70px;
            background-color: blueviolet; */
            
                display: inline-block;
                width:20px;
                height:20px;
                background:red;
                border-radius: 50%;
                vertical-align: middle;
        }

        /* 行元素 :左右结构 +  可以设置宽高的大小  => 一行
        display:inline-block
        float:left

         */
        .emBox2{
            float: left;
        }

        /* 垂直居中 */
        p{
            width:200px;
            /* height:100px;
            line-height: 100px; */
            background-color: blueviolet;
            /* 水平居中:内容 < 父容器   */
            /* text-align: center; */

            white-space: nowrap;
            overflow-x:auto
        }
        p  a{
            display: inline-block;
        }

        /* 行内（内联）元素  /  行内块 inline / inline-block
        1.inline
         -  水平排列 超出父元素大小的时候自动折行
         -  设置margin/padding的上下不起作用  左右可以 - display:block/inline-block/float

        2.inline-block
        -  水平对齐 text-align
        -  垂直对齐 vertical-align  
         */
    </style>
</head>

<body>
    <!-- <span></span> 珠峰培训1 -->

    <p>
        <a href="#">新闻</a>
        <a href="#">新闻</a>
        <a href="#">新闻</a>
        <a href="#">新闻</a>
        <a href="#">新闻</a>
        <a href="#">新闻</a>
        <a href="#">新闻</a>
        <a href="#">新闻</a>
        <a href="#">新闻</a>
    </p>

    <div class="main">
        <em class="emBox1">1</em>
        <em class="emBox2">2</em>
    </div>
    

    <div class="box">
        <div class="child">珠峰培训</div>
        <div class="child">珠峰培训</div>
    </div>
</body>

</html>